<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>酒店订单</title>
		<link href="../mui/css/mui.min.css" rel="stylesheet" />
		<link href="../styles/default.css" rel="stylesheet" />
		<style type="text/css">
			ul,
			li {
				list-style: none;
				margin: 0;
				padding: 0;
			}
			
			.hotel-header,
			.mui-title,
			.hotel-header .mui-icon {
				color: #e61874;
				background: #fff;
			}
			
			.mui-bar {
				height: 6.4rem;
			}
			
			.hotel-head,
			.hotel-room,
			.hotel-price,
			.hotel-reduce {
				display: flex;
				justify-content: space-between;
			}
			
			.hotel-head .type {
				font-size: 1.4rem;
				color: #333;
			}
			
			.hotel-room span {
				font-size: 1.4rem;
				color: #999;
			}
			
			.hotel-room .favorable {
				font-size: 1.2rem;
				color: #e61874;
				padding-left: 0.6rem;
			}
			
			.hotel-price {
				padding: 2.1rem 0 1.2rem;
			}
			
			.pre-price {
				font-size: 1.8rem;
				color: #e61874;
			}
			
			.hotel-cash {
				text-align: right;
			}
			
			.hotel-other {
				font-size: 0;
				text-align: right;
				padding-top: 3rem;
			}
			
			.hotel-other .tel {
				margin-right: 3rem;
			}
			
			.hotel-other a span {
				font-size: 1.6rem;
				color: #333;
				padding-left: 0.9rem;
			}
			
			.order-again {
				display: flex;
    			align-items: flex-end;
    			justify-content: flex-end;
			}
			
			.mui-slider-indicator {
				background-color: #fff;
			}
			
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item {
				border: none;
			}
			
			.mui-segmented-control .mui-control-item {
				position: relative;
			}
			
			.mui-segmented-control .mui-control-item.active {
				font-size: 1.8rem;
				color: #e61874;
			}
			
			.mui-segmented-control .mui-control-item.active:after {
				position: absolute;
				width: 80%;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				height: 2px;
				content: '';
				color: #e61874;
				background-color: #e61874;
				border-radius: 2px;
			}
			
			.mui-table-view {
				margin: 1.2rem;
				padding: 1.5rem 1.2rem;
				border-radius: 0.4rem;
			}
			
			.mui-table-view:before,
			.mui-table-view:after,
			.mui-table-view-cell:before,
			.mui-table-view-cell:after {
				background-color: transparent;
			}
			
			.navbar ul {
				display: flex;
				justify-content: space-around;
				background-color: #fff;
			}
			
			.navbar li {
				position: relative;
				padding: 1rem 0;
			}
			
			.navbar li.active {
				font-size: 1.8rem;
				color: #e61874;
			}
			
			.navbar li.active:after {
				position: absolute;
				width: 100%;
				height: 2px;
				content: '';
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				background-color: #e61874;
				border-radius: 2px;
			}
			
			.font10 {
				font-size: 1rem;
			}
			
			.font14 {
				font-size: 1.4rem;
				color: #999;
			}
			
			.font16 {
				font-size: 1.6rem;
				color: #333;
			}
			
			.icon {
				vertical-align: top;
			}
			
			.hotel-name {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #fff;
			}
			
			.hotel-name div {
				position: relative;
				font-size: 1.6rem;
				padding: 2.1rem 0 1.5rem;
			}
			
			.hotel-name div:after {
				position: absolute;
				width: 100%;
				bottom: 0;
				left: 0;
				height: 2px;
				content: '';
				background-color: #e61874;
				border-radius: 2px;
			}
			
			.data-wrap {
				font-size: 0;
				text-align: center;
			}
			
			.data-item {
				font-size: 1.4rem;
			}
			
			.data-stay {
				font-size: 1.2rem;
				display: inline-block;
				width: 6rem;
				height: 1.8rem;
				line-height: 1.8rem;
				text-align: center;
				border: 1px solid #e61874;
				border-radius: 1.8rem;
				margin: 0 2.1rem;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hotel-header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">酒店订单</h1>
		</header>

		<div class="mui-content">
			<div class="navbar">
				<ul>
					<li class="font14">全部</li>
					<li class="font14 active">已确认</li>
					<li class="font14">待支付</li>
					<li class="font14">待确认</li>
				</ul>
			</div>

			<!-- 待入住--开始 -->
			<ul class="mui-table-view" data-url="./order-detail2.html">
				<li class="hotel-head">
					<span class="type">待入住</span>
					<span class="font14">为您保留至21:00</span>
				</li>
				<li class="hotel-name">
					<div style="color: #e61874;">深圳雅商会馆</div>
				</li>
				<li class="mui-table-view-cell" style="padding: 1.5rem 0;">
					<div class="data-wrap">
						<span class="data-item"><span class="font10">入住</span>&nbsp;-&nbsp;<span>4月7日</span></span>
						<span class="data-stay">共1晚</span>
						<span class="data-item"><span class="font10">离店</span>&nbsp;-&nbsp;<span>4月8日</span></span>
					</div>
				</li>
				<li class="hotel-room">
					<span class="font14">标准单人间<span class="favorable">最优惠</span></span>
					<span class="font14">含单早（预付）</span>
				</li>
				<li class="hotel-price">
					<span class="font16">预付金额</span>
					<span class="pre-price">￥278</span>
				</li>
				<li class="hotel-reduce">
					<span class="font14">￥278-10=268</span>
					<span class="font14">立减￥10</span>
				</li>
				<li class="hotel-other">
					<a class="tel">
						<img width="15" class="icon" src="../styles/images/order/icon_phone.png@2x.png" />
						<span class="font16">联系酒店</span>
					</a>
					<a class="map">
						<img width="20" class="icon" src="../styles/images/order/icon_map.png@2x.png" />
						<span class="font16">酒店地图</span>
					</a>
				</li>
			</ul>
			<!-- 待入住--结束 -->
			
			<!-- 已离店--开始 -->
			<ul class="mui-table-view" data-url="./prepay-order2.html">
				<li class="hotel-head">
					<span class="type">已离店</span>
				</li>
				<li class="hotel-name">
					<div style="color: #e61874;">上海宾馆</div>
				</li>
				<li class="mui-table-view-cell" style="padding: 1.5rem 0;">
					<div class="data-wrap">
						<span class="data-item"><span class="font10">入住</span>&nbsp;-&nbsp;<span>4月7日</span></span>
						<span class="data-stay">共1晚</span>
						<span class="data-item"><span class="font10">离店</span>&nbsp;-&nbsp;<span>4月8日</span></span>
					</div>
				</li>
				<li class="hotel-room">
					<span class="font14">高级大床房</span>
					<span class="font14">含单早</span>
				</li>
				<li class="hotel-price">
					<span class="font16">预付金额</span>
					<span class="pre-price">￥678</span>
				</li>
				<li class="hotel-cash">
					<span class="font14">立减￥10</span>
				</li>
				<li class="hotel-other">
					<a class="order-again">
						<img width="16" class="icon" src="../styles/images/order/icon_order.png@2x.png" />
						<span class="font16">再次预定</span>
					</a>
				</li>
			</ul>
			<!-- 已离店--结束 -->
		</div>
		<script src="../mui/js/mui.min.js"></script>
		<script src="../libs/ems.js" data-main='./city.js'></script>
		<script type="text/javascript">
			mui.init({
				swipeBack: false
			});
		</script>
	</body>

</html>